<template>
	<view class="pages">
		<view class="header">
			<view class="left">
				<img src="/static/qiandao.png" width=25rpx />
			</view>
			<view class="center">
				<view :class="[nowTabIndex == index ? 'selected' : 'nomal']" v-for="(item,index) in tabList"
					@click="change(index)">
					{{item.name}}
					<view class="heng" v-if="nowTabIndex == index"></view>
				</view>

			</view>
			<view class="right">
				<img src="/static/add.png" width=30rpx />
			</view>
		</view>
		<view class="divide"></view>
		<!-- 关注 -->
		<view class="guanzhu" v-if="nowTabIndex == 0">
			关注
			<button @click="del">删除所有索引</button>
		</view>
		<!-- 推荐 -->
		<view class="tuijian" v-if="nowTabIndex == 1">
			<!-- 头部scroller -->
			<scroll-view scroll-x="true" :show-scrollbar="false" class="scroll">
				<view  :class="[currentClassIndex == index ? 'selected' : 'nomal']" @click="changeClass(index,item)" v-for="(item,index) in classes">
					{{item.name}}
				</view>
			</scroll-view>
			<view class="more">
				<uni-icons type="list" size="30"></uni-icons>
			</view>
			<view class="divide"></view>
			<!-- 博客内容 -->
			<view class="blog" v-for="(item,index) in blogs">
				<view class="blog-top">
					<view class="blog-top-left">
						<image :src="item.user.icon" class="icon"></image>
						<view class="userInfo">
							<view class="info-top">
								<view class="name">
									{{item.user.username}}
								</view>
								<view class="super-talk" >
									<img src="/static/zuanshi.png" style="width: 30rpx;height: 30rpx;" />
									{{item.superTalk.name}}
								</view>
							</view>
							<view class="fans">
								{{item.user.fans_num}}人关注了他
							</view>
						</view>
					</view>
					<view class="blog-top-right">
						<view class="follow">
							{{item.user.is_follow == 1 ? '加关注' : '已关注'}}
						</view>
						<uni-icons type="closeempty" size="15" color="#cbcbcb"></uni-icons>
					</view>
				</view>
				<view class="blog-center">
					<view class="content">
						{{item.content}}
					</view>
					<view class="images" v-if="item.images != null && item.images != ''">
						<img :src="item1" mode='aspectFill' class="image"  v-for="(item1,index1) in item.images" />
					</view>
					<view  v-if="item.video != null && item.video != ''">
						  <video class="myVideo" :src="item.video"  controls></video>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	import {onMounted,ref} from 'vue';
import { myGet } from '../../util/request';
	
	onMounted(() => {
		myGet("/b_classify/findAll").then(res=>{
			classes.value = classes.value.concat(res.data.data)
		})
	})
	const del = ()=>{
		myGet("/b_classify/deleteAll")
	}

	const tabList = ref([{
			id: 1,
			name: "关注"
		},
		{
			id: 2,
			name: "推荐"
		}
	])
	const nowTabIndex = ref(0)
	const change = (index) => {
		nowTabIndex.value = index
	}
	const classes = ref([{name:"热门"},{name:"实时"}])
	const currentClassIndex = ref(0)
	const changeClass = (index,item)=>{
		currentClassIndex.value = index
	}
	const blogs = ref([
		{
			id:1,
			content:'景色好看',
			superTalk:{name:'风景超话'},
			video:'',
			images:["https://pic.nximg.cn/file/20230520/31372278_171112545106_2.jpg","https://ts4.tc.mm.bing.net/th/id/OIP-C.eexecYGl9WFl9_QKBxX0VwHaHi?r=0&rs=1&pid=ImgDetMain&o=7&rm=3","https://ts4.tc.mm.bing.net/th/id/OIP-C.eexecYGl9WFl9_QKBxX0VwHaHi?r=0&rs=1&pid=ImgDetMain&o=7&rm=3","https://ts4.tc.mm.bing.net/th/id/OIP-C.eexecYGl9WFl9_QKBxX0VwHaHi?r=0&rs=1&pid=ImgDetMain&o=7&rm=3","https://ts4.tc.mm.bing.net/th/id/OIP-C.eexecYGl9WFl9_QKBxX0VwHaHi?r=0&rs=1&pid=ImgDetMain&o=7&rm=3","https://ts4.tc.mm.bing.net/th/id/OIP-C.eexecYGl9WFl9_QKBxX0VwHaHi?r=0&rs=1&pid=ImgDetMain&o=7&rm=3","https://ts4.tc.mm.bing.net/th/id/OIP-C.eexecYGl9WFl9_QKBxX0VwHaHi?r=0&rs=1&pid=ImgDetMain&o=7&rm=3","https://ts4.tc.mm.bing.net/th/id/OIP-C.eexecYGl9WFl9_QKBxX0VwHaHi?r=0&rs=1&pid=ImgDetMain&o=7&rm=3","https://ts4.tc.mm.bing.net/th/id/OIP-C.eexecYGl9WFl9_QKBxX0VwHaHi?r=0&rs=1&pid=ImgDetMain&o=7&rm=3","https://ts4.tc.mm.bing.net/th/id/OIP-C.eexecYGl9WFl9_QKBxX0VwHaHi?r=0&rs=1&pid=ImgDetMain&o=7&rm=3","https://ts4.tc.mm.bing.net/th/id/OIP-C.eexecYGl9WFl9_QKBxX0VwHaHi?r=0&rs=1&pid=ImgDetMain&o=7&rm=3","https://ts4.tc.mm.bing.net/th/id/OIP-C.eexecYGl9WFl9_QKBxX0VwHaHi?r=0&rs=1&pid=ImgDetMain&o=7&rm=3"],
			forwardId:'',
			address:'',
			state:0,
			type:1,
			classify_id:1,
			st_id:1,
			is_top:0,
			user:{
				id:1,
				username:'张三',
				phone:'15831373435',
				icon:'https://ts3.tc.mm.bing.net/th/id/OIP-C.7GLMYPqMlt2LgkbPsOnDIAAAAA?r=0&rs=1&pid=ImgDetMain&o=7&rm=3',
				fans_num:80,
				is_follow:1
			}
		},
		{
			id:1,
			content:'我的小狗',
			superTalk:{name:'小狗超话'},
			video:'/static/1.mp4',
			images:[],
			forwardId:'',
			address:'',
			state:0,
			type:1,
			classify_id:1,
			st_id:1,
			is_top:0,
			user:{
				id:1,
				username:'张三',
				phone:'15831373435',
				icon:'https://ts3.tc.mm.bing.net/th/id/OIP-C.7GLMYPqMlt2LgkbPsOnDIAAAAA?r=0&rs=1&pid=ImgDetMain&o=7&rm=3',
				fans_num:80,
				is_follow:1
			}
		},
	])
</script>

<style>
	* {
		margin: 0;
		padding: 0;
		background-color: #ffffff;
	}

	.header {
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #8b8b8b;
	}

	.header .center {
		display: flex;
		gap: 40rpx;
		font-size: 40rpx;
	}

	.header .center .selected {
		color: black;
		font-weight: bold;
	}

	.divide {
		background-color: #eeeeee;
		width: 100%;
		height: 3rpx;
	}

	.header .center .heng {
		width: 80rpx;
		height: 10rpx;
		background-color: #fbad00;
		border-radius: 10rpx;
		position: absolute;
		top: 60rpx;
	}
	.scroll{
		width: 90%;
		height: 80rpx;
		white-space: nowrap;
		line-height: 80rpx;	
		}
	 .tuijian .nomal{
		width: 100rpx;
		margin: 5rpx;
		font-size: 35rpx;
		color: #4a4a4a;
		display: inline-block;
	}
	.tuijian .selected{
		width: 100rpx;
		margin: 5rpx;
		font-size: 40rpx;
		color: #ed8e19;
		font-weight: bolder;
		display: inline-block;
	}
	.more{
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		right: 0rpx;
		width: 80rpx;
		height: 60rpx;
		top: 96rpx;
	}
	.blog{
		padding: 20rpx;
	}
	.blog-top{
		width: 100%;
		height: 100rpx;
		display: flex;
	}
	.blog-top-left{
		width: 70%;
		height: 100%;
		display: flex;
	}
	.blog-top .blog-top-left .icon{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		margin-right: 15rpx;
	}
	.blog-top-left .name{
		font-weight: bold;
		font-size: 35rpx;
		margin-right: 20rpx;
	}
	.blog-top-left .fans{
		font-size: 25rpx;
		color: #a6a4a5;
	}
	.blog-top-left .info-top{
		display: flex;
		height: 60rpx;
		align-items: center;
		margin-bottom: 5px;
	}
	.blog-top-left .info-top .super-talk{
		color: #5e82a6;
		font-weight: bold;
		display: flex;
		align-items: center;
	}
	.blog-top-right{
		flex-grow: 1;
		height: 100%;
		display: flex;
		align-items: center;
	}
	.blog-top-right .follow{
		color: #ec9637;
		padding: 10rpx 20rpx;
		border: 2px solid #ec9637;
		border-radius: 30rpx;
		margin-right: 10rpx;
	}
	.blog-center{
		width: 100%;
		margin-top: 10rpx;
	}
	.blog-center .content{
		font-size: 30rpx;
		margin-bottom: 20rpx;
	}
	.blog-center .images{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		max-height: 680rpx;
		overflow: hidden;
		gap: 10rpx;
	}
	.blog-center .images .image{
		width: 220rpx;
		height: 220rpx;
	}
	.blog-center .myVideo{
		width: 100%;
	}
</style>